<template>
	<view class="project-experience">
		<cu-custom isBack="true"></cu-custom>
		<header-title>
			<block slot="title">编辑项目经历</block>
			<block slot="projectInfo">从最近一份工所写起哦</block>
		</header-title>

		<view class="education-body">
			<education-item>
				<block slot="title">项目名称</block>
				<input slot="from" v-model="projectInfo.project_name" class="input"
					placeholder-class="input-placeholder" placeholder="例如：简历APP" />
			</education-item>

			<education-item>
				<block slot="title">担任角色</block>
				<input slot="from" v-model="projectInfo.project_position" class="input"
					placeholder-class="input-placeholder" placeholder="例如：前端工程师" />
			</education-item>

			<education-item>
				<block slot="title">时间段</block>
				<input @click="showPickHandle" slot="from" class="input arrow" disabled="true"
					placeholder-class="input-placeholder" placeholder="请选择时间段" :value="timeSlotArr" />
			</education-item>


			<education-item>
				<block slot="title">项目描述</block>
				<input @click="setProjectAboutHandle" slot="from" class="input arrow" disabled="true"
					placeholder-class="input-placeholder" placeholder="请填写项目描述" :value="projectInfo.project_about" />
			</education-item>

			<education-item>
				<block slot="title">项目成果</block>
				<input @click="setProjectAchievementHandle" slot="from" class="input arrow" disabled="true"
					placeholder-class="input-placeholder" placeholder="请填写项目成果"
					:value="projectInfo.project_achievement" />
			</education-item>

			<footer-btn @submit="nextClickHandle">
				<text slot="text">
					<block v-if="pageType=='add'">
						下一步
					</block>
					<block v-if="pageType=='update'">
						确认
					</block>
				</text>
			</footer-btn>

			<rangeDatePick :show="isShowPick" @showchange="hidePickHandle" :start="startTime" :end="endTime"
				:value="projectInfo.project_time" @change="pickChange" @cancel="hidePickHandle" fields="month">
			</rangeDatePick>
		</view>
	</view>
</template>

<script>
	import headerTitle from '../../components/header-title/header-title.vue';
	import educationItem from '../../components/education-item/education-item.vue';
	import rangeDatePick from '@/components/pyh-rdtpicker/pyh-rdtpicker.vue';
	import footerBtn from '../../components/footer-btn/footer-btn.vue';
	export default {
		components: {
			headerTitle,
			educationItem,
			rangeDatePick,
			footerBtn
		},
		data() {
			return {
				projectInfo: {
					project_name: '',
					project_position: '',
					project_time: Array(2).fill(this.$comm.formatDate("YYYY-MM")),
					project_about: '',
					project_achievement: ''
				},
				startTime: this.$comm.formatDate("YYYY-MM", this.$comm.getDateByYear(-20)),
				endTime: this.$comm.formatDate("YYYY-MM", this.$comm.getDateByYear()),
				isShowPick: false,
				pageType: 'add'
			};
		},
		onLoad(option) {
			let {
				pageType = 'add'
			} = option
			if (pageType == 'update') {
				let projectInfo = this.$store.getters['update/getProjectInfoData']
				this.projectInfo = Object.assign(this.projectInfo, projectInfo)
			}
			this.pageType = pageType
		},
		computed: {
			timeSlotArr() {
				return this.projectInfo.project_time.join(" 至 ")
			}
		},
		methods: {
			showPickHandle() {
				this.isShowPick = true
			},
			hidePickHandle() {
				this.isShowPick = false
			},
			pickChange(e) {
				this.projectInfo.project_time = e
			},
			setProjectAboutHandle() {
				this.$comm.navigateTo(`/pages/project-describe/project-describe?val=${this.projectInfo.project_about}`)
				uni.$once('setContent', (e) => {
					this.projectInfo.project_about = e
				})
			},
			setProjectAchievementHandle() {
				this.$comm.navigateTo(
					`/pages/project-achievements/project-achievements?val=${this.projectInfo.project_achievement}`)
				uni.$once('setContent', (e) => {
					this.projectInfo.project_achievement = e
				})
			},
			nextClickHandle() {
				let projectInfo = JSON.parse(JSON.stringify(this.projectInfo))
				
				let valLoginRes = this.$validate.validate(projectInfo, [{
					name: 'project_name',
					type: 'required',
					errmsg: '项目名称不能为空'
				}, {
					name: 'project_position',
					type: 'required',
					errmsg: '项目职位不能为空'
				}, {
					name: 'project_time',
					type: 'arrlength',
					errmsg: '项目时间段不能为空'
				}, {
					name: 'project_about',
					type: 'required',
					errmsg: '项目描述不能为空'
				}, {
					name: 'project_achievement',
					type: 'required',
					errmsg: '项目成果不能为空'
				}])
				if (!valLoginRes.isOk) {
					this.$comm.errorToShow(valLoginRes.errmsg)
					return false
				}
				if (this.pageType == 'update') {
					this.$comm.navigateBack(1,()=>{
						uni.$emit('updateProjectInfo', projectInfo)
					})
				} else if (this.pageType == 'add') {
					this.$store.commit('add/setProjectInfoData', [projectInfo])
					this.$comm.navigateTo("/pages/professional/professional")
				}
			}
		}
	}
</script>

<style lang="scss">
	.input-placeholder {
		color: $font-cA7;
		font-size: 42upx;
	}

	.project-experience {
		@include formStyle;
	}
</style>
